<template>
    <scroll-view class="mine" :scroll-y="true">
        <view class="mine-all">
            <view class="iconall">
                <navigator
                    hover-class="none"
                    class="navigator-icon"
                    :hover-stop-propagation="true"
                >
                    <image
                        src="https://z3.ax1x.com/2021/04/07/cGFb9S.png"
                    ></image>
                </navigator>
                <navigator
                    hover-class="none"
                    class="navigator-icon"
                    :hover-stop-propagation="true"
                    url="infomation/infomation"
                >
                    <image
                        src="https://z3.ax1x.com/2021/04/07/cGF7h8.png"
                    ></image>
                </navigator>
                <navigator
                    hover-class="none"
                    class="navigator-icon"
                    :hover-stop-propagation="true"
                >
                    <image
                        src="https://z3.ax1x.com/2021/04/07/cGFq1g.png"
                    ></image>
                </navigator>
            </view>
        </view>
        <view class="content">
            <view class="content-1">
                <view class="content-1-top">
                    <view class="content-1-top-left">
                        <view class="touxiang">
                            <image
                                :src="userInfo.userImage"
                            ></image>
                            <view class="login-state">未实名</view>
                        </view>
                    </view>
                    <view class="content-1-top-right">
                        <navigator :hover-stop-propagation="true" hover-class="none">
                            <template v-if="!isLoginState">
                                <text class="isLogin">登录/注册</text>
                                <view class="youhuibox">
                                    <text class="findyouhua"
                                        >登录后查看更多优惠信息</text
                                    >
                                </view>
                            </template>
                            <template v-else>
                                <template v-if="userInfo.userName==null">
                                	<text class="isLogin">用户963852</text>
                                </template>
								<template v-else>
									<text class="isLogin">{{userInfo.userName}}</text>
								</template>
                                <view class="jifen">
                                    <view class="zuanshi">
                                        <image
                                            src="https://z3.ax1x.com/2021/04/14/c6798P.png"
                                            mode=""
                                        ></image>
                                        <text>V1</text>
                                    </view>
                                    <view class="editInfo" @click="editUserInfo">
                                        <text>编辑资料</text>
                                    </view>
                                </view>
                            </template>
                        </navigator>
                    </view>
                </view>
                <view class="content-1-bottom">
                    <view
                        v-for="item1 in totalOperation"
                        :key="item1.id"
                        class="operation"
                    >
                        <template v-if="!isLoginState">
                            <view>--/--</view>
                            <view>{{ item1.text }}</view>
                        </template>
                        <template v-else>
                            <navigator
                                :url="item1.url"
                                open-type="navigate"
                                hover-class="none"
                            >
                                <!-- <view>30</view> -->
								<image class="icon" :src="item1.imageUrl" mode=""></image>
                                <view>{{ item1.text }}</view>
                            </navigator>
                        </template>
                    </view>
                </view>
            </view>
            <view class="content-2">
                <template
                    v-if="isLoginState == false || isHaveLoveCar == false"
                >
                    <view @click="isLogin">
                        <image
                            src="https://i.loli.net/2021/04/08/sWEoI96uMlab7NR.png"
                        ></image>
                        <text>添加我的爱车</text>
                    </view>
                </template>
                <template v-if="isLoginState == true && isHaveLoveCar == true">
                    <navigator
                        class="lovecar-item"
                        :hover-stop-propagation="true"
                        url="./loveCar/loveCar"
                        hover-class="none"
                        open-type="navigate"
						@click="saveLoveCar"
                    >
                        <view class="item-left">
                            <image :src="carInfo[0].mycarImage"></image>
                        </view>
                        <view class="item-right">
                            <view>{{ carInfo[0].mycarBrand }}</view>
                            <text
                                >{{ carInfo[0].mycarProductionDate }} -
                                {{ carInfo[0].mycarType }}</text
                            >
                        </view>
                    </navigator>
                </template>
            </view>
            <view class="content-3">
                <view class="content-3-title">
                    <text>工具栏</text>
                    <navigator
                        open-type="navigate"
                        url="./toolBar/toolBar?id=0"
                        hover-class="none"
                        :hover-stop-propagation="true"
                    >
                        <text class="allorder">全部订单</text>
                    </navigator>
                </view>
                <view class="content-3-tool">
                    <view
                        class="content-3-toolItem"
                        v-for="item3 in toorBar"
                        :key="item3.id"
                    >
                        <navigator
                            open-type="navigate"
                            :url="'./toolBar/toolBar?id=' + item3.id"
                            hover-class="none"
                            :hover-stop-propagation="true"
                        >
                            <image :src="item3.toolBarIcon"></image>
                            <view>{{ item3.toolBarText }}</view>
                        </navigator>
                    </view>
                </view>
            </view>
            <view class="content-4"></view>
            <view class="content-5">
                <view class="content-5-title">
                    <text>常用工具</text>
                    <view class="content-5-icon">
                        <view
                            class="toolicon-item"
                            v-for="item2 in oftenTool"
                            :key="item2.id"
                        >
                            <navigator
                                :hover-stop-propagation="true"
                                hover-class="none"
                            >
                                <image :src="item2.toolIcon"></image>
                                <view>{{ item2.toolText }}</view>
                            </navigator>
                        </view>
                    </view>
                </view>
            </view>
            <view style="margin-left: 5rpx">
                <selectedRecommendation></selectedRecommendation>
            </view>
        </view>
    </scroll-view>
</template>

<script>
import selectedRecommendation from "../../components/selected-recommendation/selected-recommendation";
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("mine");
export default {
    data() {
        return {
            totalOperation: [
                {
                    id: 1,
                    text: "收藏",
                    url: "./collect/collect",
					imageUrl:"https://z3.ax1x.com/2021/04/17/c4lgMT.png"
                },
                {
                    id: 2,
                    text: "地址",
                    url: "./mineAddress/mineAddress",
					imageUrl:"https://z3.ax1x.com/2021/04/17/c4lRLF.png"
                },
                {
                    id: 3,
                    text: "购物车",
                    url: "../mall/mall-shoppingCart/mall-shoppingCart",
					imageUrl:"https://z3.ax1x.com/2021/04/17/c4l6zV.png"
                },
                {
                    id: 4,
                    text: "钱包",
                    url: "./moneyBag/moneyBag",
					imageUrl:"https://z3.ax1x.com/2021/04/17/c4l2sU.png"
                },
                {
                    id: 5,
                    text: "卡券",
                    url: "./moneyBag/moneyBag",
					imageUrl:"https://z3.ax1x.com/2021/04/17/c4lyR0.png"
                },
            ],
            isLoginState: false,
            toorBar: [
                {
                    id: 1,
                    toolBarIcon: "https://z3.ax1x.com/2021/04/08/cJYk6J.png",
                    toolBarText: "待支付",
                },
                {
                    id: 2,
                    toolBarIcon: "https://z3.ax1x.com/2021/04/08/cJYAX9.png",
                    toolBarText: "待使用",
                },
                {
                    id: 3,
                    toolBarIcon: "https://z3.ax1x.com/2021/04/08/cJYVmR.png",
                    toolBarText: "待收货",
                },
                {
                    id: 4,
                    toolBarIcon: "https://z3.ax1x.com/2021/04/08/cJYFl4.png",
                    toolBarText: "待评价",
                },
                {
                    id: 5,
                    toolBarIcon: "https://z3.ax1x.com/2021/04/08/cJYipF.png",
                    toolBarText: "退款/售后",
                },
            ],
            oftenTool: [
                {
                    id: 1,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtnDs.png",
                    toolText: "我的评价",
                },
                {
                    id: 2,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtQU0.png",
                    toolText: "会员中心",
                },
                {
                    id: 3,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtmuj.png",
                    toolText: "联系客服",
                },
                {
                    id: 4,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtl5V.png",
                    toolText: "邀请有礼",
                },
                {
                    id: 5,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJt88U.png",
                    toolText: "优驿联名卡",
                },
                {
                    id: 6,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtubn.png",
                    toolText: "合作加盟",
                },
                {
                    id: 7,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJtMEq.png",
                    toolText: "常见问题",
                },
                {
                    id: 8,
                    toolIcon: "https://z3.ax1x.com/2021/04/08/cJt3CT.png",
                    toolText: "意见反馈",
                },
            ],
        };
    },
    components: {
        selectedRecommendation,
    },
    onReady() {
        uni.setNavigationBarColor({
            backgroundColor: "#28292D",
            frontColor: "#000000",
        });
    },
	onShow(){
		this.LoginState()
		this.getMyLoveCarInfo();
		this.getUserInfoAll();
	},
    computed: {
        ...mapState(["carInfo","userInfo"]),
        isHaveLoveCar() {
            if (this.carInfo.length > 0) {
                return true;
            } else {
                return false;
            }
        },
    },
    methods: {
        ...mapActions(["getMyLoveCarInfo","getUserInfoAll"]),
		
        isLogin() {
                uni.navigateTo({
                    url: "addMyLoveCar/addMyLoveCar",
                });
        },
		LoginState(){
			let auth_token=uni.getStorageSync('auth_token')
			if(auth_token==""){
				uni.showModal({
					title:"未登录",
					content:"未登录，请先去登陆",
					success() {
						uni.redirectTo({
							url:"../login/login"
						})
					}
				})
				
			}
			else{
				this.isLoginState=true
				this.getMyLoveCarInfo();
				this.getUserInfoAll()
			}
		},
		editUserInfo(){
			uni.navigateTo({
				url:"person/person"
			})
		},
		saveLoveCar(){
			uni.setStorageSync('loveCar',JSON.stringify(this.carInfo[0]))
		}
    },
};
</script>

<style lang="scss" scoped>
.mine {
    background-color: #f9f9f9;
    height: 100vh;
    .mine-all {
        width: 100vw;
        height: 500rpx;
        background-image: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340505,2241674845&fm=26&gp=0.jpg");
        background-position: center;
        background-size: contain;
        .iconall {
            display: flex;
            float: right;
            margin-top: 140rpx;
            .navigator-icon {
                background-color: #737373;
                width: 60rpx;
                height: 60rpx;
                margin-right: 20rpx;
                border-radius: 100%;
                text-align: center;
                image {
                    width: 60rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                }
            }
        }
    }
    .content {
        width: 94%;
        height: 100%;
        margin: -100rpx auto 0rpx;
        .content-1 {
            width: 100%;
            height: 370rpx;
            background-color: white;
            border-radius: 12rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            padding: 20rpx;
            .content-1-top {
                display: flex;
                .content-1-top-left {
                    .touxiang {
                        position: relative;
                        image {
                            width: 160rpx;
                            height: 160rpx;
                            border-radius: 100%;
                        }
                        .login-state {
                            width: 160rpx;
                            height: 50rpx;
                            border-radius: 30rpx;
                            background-color: #f26200;
                            color: white;
                            text-align: center;
                            line-height: 50rpx;
                            position: absolute;
                            top: 120rpx;
                        }
                    }
                }
                .content-1-top-right {
                    margin-left: 30rpx;
                    margin-top: 10rpx;
                    .isLogin {
                        font-weight: 600;
                        font-size: 20px;
                    }
                    .youhuibox {
                        margin-top: 10rpx;
                        .findyouhua {
                            font-size: 14px;
                            color: gray;
                        }
                    }
                    .jifen {
                        display: flex;
                        margin-top: 20rpx;
                        .editInfo {
                            width: 130rpx;
                            border-radius: 40rpx;
                            line-height: 50rpx;
                            text-align: center;
                            height: 50rpx;
                            border: 2rpx solid gray;
                            font-size: 28rpx;
                            color: gray;
                        }
                        .zuanshi {
                            width: 120rpx;
                            height: 50rpx;
                            border-radius: 40rpx;
                            line-height: 50rpx;
                            text-align: center;
                            background-color: #8ed4ff;
                            color: white;
                            margin-right: 20rpx;
                            image {
                                width: 40rpx;
                                height: 32rpx;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }
            .content-1-bottom {
                display: flex;
                justify-content: space-around;
                align-items: center;
                text-align: center;
                margin-top: 50rpx;
                color: gray;
                .operation {
                    width: 100rpx;
                    height: 100rpx;
                }
				.icon{
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
            }
        }
        .content-2 {
            width: 100%;
            // height: 200rpx;
            background-color: white;
            border-radius: 10rpx;
            margin-bottom: 30rpx;
            font-size: 20px;
            text-align: center;
            line-height: 200rpx;
            image {
                width: 80rpx;
                height: 80rpx;
                vertical-align: middle;
                margin-right: 20rpx;
            }
            .lovecar-item {
                display: flex;
                justify-content: center;
                .item-left {
                    width: 40%;
                    height: 200rpx;
                    image {
                        width: 200rpx;
                        height: 200rpx;
                    }
                }
                .item-right {
                    width: 60%;
                    height: 200rpx;
                    line-height: 1.2;
                    padding-top: 60rpx;
                    box-sizing: border-box;
                    text-align: left;
                    text {
                        font-size: 28rpx;
                        color: gray;
                    }
                }
            }
        }
        .content-3 {
            width: 100%;
            height: 300rpx;
            background-color: white;
            border-radius: 10rpx;
            margin-bottom: 30rpx;
            .content-3-title {
                width: 100%;
                height: 100rpx;
                display: flex;
                justify-content: space-between;
                line-height: 100rpx;
                text {
                    font-size: 24px;
                    font-weight: 500;
                    padding-left: 20rpx;
                }
                .allorder {
                    color: gray;
                    font-size: 14px;
                    padding-right: 20rpx;
                }
            }
            .content-3-tool {
                display: flex;
                margin-top: 30rpx;
                align-items: center;
                justify-content: space-between;
                .content-3-toolItem {
                    width: 120rpx;
                    text-align: center;
                    font-size: 14px;
                    image {
                        width: 80rpx;
                        height: 80rpx;
                    }
                    &:nth-last-of-type(1) {
                        width: 160rpx;
                    }
                }
            }
        }
        .content-4 {
            width: 100%;
            height: 160rpx;
            margin-bottom: 30rpx;
            background: url("https://z3.ax1x.com/2021/04/07/c8DE6O.png")
                no-repeat center;
            background-size: contain;
        }
        .content-5 {
            width: 100%;
            height: 400rpx;
            background-color: white;
            border-radius: 20rpx;
            margin-bottom: 30rpx;
            .content-5-title {
                text {
                    font-size: 24px;
                    font-weight: 500;
                    padding-left: 20rpx;
                }
            }
            .content-5-icon {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .toolicon-item {
                    width: 170rpx;
                    text-align: center;
                    margin-top: 20rpx;
                    font-size: 14px;
                    color: gray;
                    image {
                        width: 80rpx;
                        height: 80rpx;
                    }
                }
            }
        }
    }
}
</style>
